<template>
  <uni-section title="工单信息" type="line">
      <uni-card :is-shadow="false">
        <view class="feedback">
          <view class="row">
            <view class="item" @click="tested">
              <uni-icons type="settings-filled" size="30" color="#fcd459"></uni-icons>
              <text class="label" >待勘测</text>
            </view>
            <view class="item" @click="Surveying">
              <uni-icons type="bars" size="30" color="#e7705d"></uni-icons>
              <text class="label">勘测中</text>
            </view>
            <view class="item" @click="SurveyReceipt">
              <uni-icons type="checkmarkempty" size="30" color="#0059ff"></uni-icons>
              <text class="label">勘测结果</text>
            </view>
          </view>
        </view>
      </uni-card>
    </uni-section>
   <view class="hh" >
     <view class="bv">
       <view class="hg"  @click="Tobeinstalled">
         <uni-icons type="tune-filled" size="30" color="#fcd459"></uni-icons>
         <view class="" >待安装</view>
       </view>
       <view class="hgg" @click="Beinginstalled">
        <uni-icons type="map-pin" size="30" color="#e7705d"></uni-icons>
         <view class="">已安装</view>
       </view>
       <view class="hggg">
        <uni-icons type="star-filled" size="30" color="#0059ff"></uni-icons>
         <view class="">安装回执</view>
       </view>

     </view>
     </view>
</template>

<script setup>
function tested(){
 uni.navigateTo({ url: '/subpkg_work/tested/tested' })
}
function Surveying(){
 uni.navigateTo({ url: '/subpkg_work/Surveying/Surveying' })
}
function SurveyReceipt(){
 uni.navigateTo({ url: '/subpkg_work/SurveyReceipt/SurveyReceipt' })
}
function Tobeinstalled(){
 uni.navigateTo({ url: '/subpkg_work/Tobeinstalled/Tobeinstalled' })
}
function Beinginstalled(){
 uni.navigateTo({ url: '/subpkg_work/Beinginstalled/Beinginstalled' })
}
</script>

<style lang="scss" scoped>
.feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  font-size: 14px;
  color: #000000;
  text-align: center;
}

.personage {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.set {
  width: 70px;
  height: 30px;
  border: 1px solid #fff;
  background-color: #ffffff;
  opacity: 0.8;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 80%;
  transform: translate(0px, 0px);
}
.information{
  color: orange;
  width: 100px;
  margin-left: 20px;
}

.aa{
  width: 90%;
  height: 100px;
  line-height: 50px;
  margin-left: 5%;
  margin-top: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
}

.bb{
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #000;
}
.hh{
  width: 92%;
  margin-left: 4%;
  background-color: #ffffff;
  border: 1px solid  #f4f4f4;
  border-radius: 10px;
}
.bv{
  display: flex;
  justify-content: space-around;
}
.hg{
  text-align: center;
  font-size: 15px;
  margin-right: 13%;
}
.hgg{
  text-align: center;
  font-size: 14px;
}
.hggg{
  font-size: 14px;
  text-align: center;
  margin-left: 16%;
  margin-right: 2%;
}


</style>
